<template>
	<view class="index" :style="[navBackground]">
		<!-- #ifdef H5 -->
		<download-nav v-if="isShowDownload"></download-nav>
		<!-- #endif -->
		<u-sticky offset-top="0" h5-nav-height="0" bg-color="transparent" :enable="enable">
			<u-navbar :border-bottom="false" :is-fixed="false" custom-class="home-bg" :background="navBackground"
				:is-back="false">
				<view class="nav-top">
					<view class="logo-top">
						<image class="logo-top__logo" src="@/static/images/logo.png"></image>
						<view class="logo-top__city" @click="goPageNotLogin('/pages/city-selects/city-selects')">
							{{ currentCity }}<u-icon name="arrow-down"></u-icon>
						</view>
						<!-- <u-select v-model="showCtyOptions" mode="mutil-column-auto" value-name="adcode" cancel-text="重置" label-name="name" child-name="districts" :list="cityOptions" @confirm="selectCity" @cancel="cencelCity"></u-select> -->
					</view>
					<!-- <u-icon @click="goPage('/pages/goods_search/goods_search')" name="search" size="34"></u-icon> -->
				</view>
			</u-navbar>
		</u-sticky>
		<view class="search">
			<u-search placeholder="搜索项目" @focus="goPage('/pages/goods_search/goods_search')" bg-color="#F4F4F4"
				name="search" size="34"></u-search>
		</view>
		<view class="activity-box">
			<!-- 导航banner -->
			<view class="row-between banner-top">
				<image class="banner-top-img" v-for="(banner, index) in banners" :src="banner.image" :key="index"
					@click="goPage(banner.href)" />
			</view>
			<!-- 活动轮播图 -->
			<view v-if="activities.length>0">
				<view class="wrap acivitie-wrapper">
					<u-swiper name="head_img" bg-color="#fff" mode="rect" border-radius="24" :height="182"
						:list="activities" @click="activityClick"></u-swiper>
				</view>
			</view>
		</view>
		<!-- 		<view class="grid-nav">
			<image @click="goPage('/bundle/pages/user_sign/user_sign')" class="grid-nav__img" src="@/static/images/icon003.png"></image>
			<image @click="goPage('/bundle/pages/user_spread/user_spread')" class="grid-nav__img" src="@/static/images/icon001.png"></image>
			<image @click="goPage('/pages/hospital/list')" class="grid-nav__img" src="@/static/images/icon002.png"></image>
		</view>
		<view @click="copyWechat" class="banner">
			<image class="banner-img" src="@/static/images/banner001.png"></image>
		</view> -->
		<view class="contain">
			<view class="main">
				<u-sticky offsetTop="138">
					<!-- <u-tabs
						:list="cate_tab.data"
						:current="cate_tab.current"
						active-color="#ff5e61"
						@change="switchCate"
					/> -->
					<!-- <view class="" @click="changeCate">打开</view> -->
				</u-sticky>
				<!-- <bubble-tips top="50rpx" :discharge="isDischarge"></bubble-tips> // 足迹气泡组件-->
				<!-- <swipers :pid="1" height="322rpx" padding="20rpx 0"></swipers> // 广告位组件 -->
				<!-- 导航入口 -->
				<view class="nav bg-white" v-if="navList.length">
					<swiper :style="'height:' + navSwiperH + 'rpx;'" @change="swiperChange">
						<swiper-item v-for="(items, index) in navList" :key="index">
							<view class="nav-list row wrap">
								<view v-for="(item, index2) in items" :key="index2" @tap="tapMenu(item)"
									class="nav-item column-center">
									<image class="nav-icon" :src="item.image"></image>
									<view class="name xs">{{ item.name }}</view>
								</view>
							</view>
						</swiper-item>
					</swiper>
					<view class="dots" v-if="navList.length > 1">
						<view v-for="(item, index) in navList" :key="index"
							:class="'dot ' + (index == currentSwiper ? 'active' : '')"></view>
					</view>
				</view>
				<!-- 资讯 -->
				<navigator v-if="news.length" class="information bg-white row mt20" hover-class="none"
					open-type="navigate" url="/pages/news_list/news_list">
					<image class="icon-toutiao" src="/static/images/icon_toutiao.png"></image>
					<text class="gap-line"></text>
					<view class="news flex1">
						<view class="shade"></view>
						<swiper autoplay="true" style="height: 76rpx; flex: 1" vertical="true" circular="true"
							:interval="3000">
							<swiper-item v-for="(item, index) in news" :key="index" class="row">
								<view class="flexnone">
									<u-tag v-if="item.is_new" shape="circle" text="最新" size="mini" type="primary"
										mode="plain" />
								</view>
								<view class="text-swiper ml10 line1">{{ item.title }}</view>
							</swiper-item>
						</swiper>
					</view>
					<image class="icon-sm ml20" src="/static/images/arrow_right.png" />
				</navigator>
				<!-- 领卷 -->
				<swipers :is-swiper="false" :pid="23" height="170rpx" padding="20rpx 0 0"></swipers>
				<!-- 活动专区 -->
				<view v-if="false" class="special-area mt20">
					<view>
						<scroll-view style="white-space: nowrap" :scroll-x="true">
							<navigator class="item bg-white" v-for="(item, index) in activityArea" :key="index"
								hover-class="none"
								:url="`/bundle/pages/activity_detail/activity_detail?id=${item.id}&name=${item.title}&title=${item.name}`">
								<view class="column-center">
									<custom-image width="300rpx" height="436rpx" :src="item.image"></custom-image>
									<!-- <view class="title xxl">{{item.name}}</view>
									<view class="desc primary xxs line1">{{item.title}}</view> -->
								</view>
							</navigator>
						</scroll-view>
					</view>
				</view>
				<!-- 秒杀 -->
				<view class="seckill mt20" v-if="seckillGoods.length">
					<active-area type="seckill" progressBarColor="#FF2C3C" :lists="seckillGoods">
						<navigator slot="header" hover-class="none" class="row activity-header white"
							open-type="navigate" url="/bundle/pages/goods_seckill/goods_seckill">
							<view class="title xxl bold">超值秒杀</view>
							<view class="row flex1">
								<text class="white xs ml10 line1">{{ seckill.start_time }}点场</text>
								<view class="dec ml20 row-center mr20 br60">
									<u-count-down :timestamp="remainTime" separator-color="#FF2C3C" color="#FF2C3C"
										:separator-size="24" :font-size="24" bg-color="transparent"></u-count-down>
								</view>
							</view>
							<view class="row xs">
								更多
								<u-icon name="arrow-right" size="28"></u-icon>
							</view>
						</navigator>
					</active-area>
				</view>
				<!-- <view class="cateList" @click="changeCate">
					<view class="cate-item">
						{{ first_cate || "全部分类" }}
						<u-icon :name="showCate ? 'arrow-up-fill' : 'arrow-down-fill'" size="28"></u-icon>
					</view>
					<view class="cate-item" v-if="currentCate.length === 2 || currentCate.length === 3">
						{{ second_cate || "二级分类" }}
						<u-icon :name="showCate ? 'arrow-up-fill' : 'arrow-down-fill'" size="28"></u-icon>
					</view>
					<view class="cate-item" v-if="currentCate.length === 3">
						{{ third_cate || "三级分类" }}
						<u-icon :name="showCate ? 'arrow-up-fill' : 'arrow-down-fill'" size="28"></u-icon>
					</view>
				</view> -->

				<u-tabs :list="tabList" active-color="#000000" inactive-color="#C7C4CC" :is-scroll="true"
					:current="currentTab" @change="tabChange"></u-tabs>

				<u-select v-model="showCate" mode="mutil-column-auto" value-name="id" label-name="name" cancel-text="重置"
					:list="cateOptions" @confirm="confirmCate" @cancel="cencelCate"></u-select>
				<!-- 热销 -->
				<view class="hot">
					<!-- 未登录时展示新人权益 -->
					<active-area type="hot" progressBarColor="#9912FE" :lists="indexList.list">
					</active-area>
					<loading-footer :status="indexList.status" :slot-empty="true">
						<view slot="empty" class="column-center" style="padding-top: 200rpx">
							<image class="img-null" src="/static/images/goods_null.png"></image>
							<text class="lighter">暂无商品</text>
						</view>
					</loading-footer>
				</view>
			</view>
		</view>
		<u-popup class="coupons-popup" v-model="showCoupop" mode="center">
			<view class="wrap">
				<!-- <image class="coupon-bg" src="/static/images/home_coupon_bg.png"></image> -->
				<scroll-view :scroll-y="true" style="height: 460rpx; margin-top: 300rpx">
					<view class="item" v-for="(item, index) in couponPopList" :key="item.id">
						<image class="img" src="/static/images/pop_bg_coupon.png"></image>
						<view class="row item-con">
							<view class="row-center price">
								<price-format color="#FF2C3C" :showSubscript="true" :subscriptSize="32" :first-size="56"
									:second-size="40" :price="item.money" />
							</view>
							<view class="ml20 mr20">
								<view class="bold md lighter">{{ item.name }}</view>
								<view class="xs muted mt10">{{ item.use_goods_type }}</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="white row-center bg-primary lg btn br60" @click="showCoupop = false">立即领取</view>
		</u-popup>
		<!-- #ifdef APP-PLUS -->
		<lyg-popup v-if="appConfig.app_agreement" title="服务协议和隐私政策"
			protocolPath="/bundle/pages/server_explan/server_explan?type=0"
			policyPath="/bundle/pages/server_explan/server_explan?type=1" policyStorageKey="has_read_privacy">
		</lyg-popup>
		<!-- #endif -->
		<view class="footer-loging-wrapper row-center" v-if="!isLogin">
			<u-icon name="/static/images/wechat.png" :size="40"></u-icon>
			<text style="color: #fff;margin-left: 10upx;">使用微信快速登陆</text>
			<text style="margin-left: 8upx;">新用户注册赠红包</text>
			<view class="login-button" @click="()=>login()">一键登录</view>
		</view>
		<u-back-top :scroll-top="scrollTop" :top="1000" :customStyle="{
        backgroundColor: '#FFF',
        color: '#000',
        boxShadow: '0px 3px 6px rgba(0, 0, 0, 0.1)',
      }"></u-back-top>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from "vuex";
	import {
		getHome,
		getMenu,
		getBestList,
		getCatrgory,
		getGoodsSearch,
	} from "@/api/store";
	import {
		getPlatformActivity
	} from "@/api/activity";
	import {
		loadingType
	} from "@/utils/type";
	import {
		loadingFun,
		menuJump,
		arraySlice,
		setTabbar,
		getRect,
		trottle,
	} from "@/utils/tools";
	import {
		toLogin
	} from "@/utils/login";
	import Cache from "@/utils/cache";
	import {
		getRegisterCoupon,
		refreshToken
	} from "@/api/app";
	import City from "@/utils/city.json";
	import PageExposure from "@/mixins/page_exposure.js"

	const app = getApp();
	export default {
		mixins: [PageExposure],
		data() {
			return {
				scrollTop: 0,
				navSwiperH: 374,
				logo: "",
				navHeight: 0,
				currentSwiper: 0,
				page: 1,
				status: loadingType.LOADING,
				remainTime: "",
				navBg: 0,
				navList: [],
				news: [],
				goodsList: [],
				seckill: {},
				seckillGoods: [],
				hotGoods: [],
				banners: [{
						image: "/static/images/service.png",
						href: "/pages/new_service/new_service",
					},
					{
						image: "/static/images/icon001.png",
						href: "/pages/discovery/discovery",
					},
					{
						image: "/static/images/icon002.png",
						href: "/social/pages/license/license",
					},
				],
				activities: [],
				newGoods: [],
				activityArea: [],
				showCoupop: false,
				couponPopList: [],
				coupon: [],
				isDischarge: true,
				enable: true,
				isShowDownload: false,
				cate_tab: {
					data: [{
							name: "全部",
							id: 0,
						},
						{
							name: "热销",
							id: -1,
						},
					],
					current: 0,
				},
				indexList: {
					params: {
						page: 1,
						pagesize: 10,
						id: null,
						first_cate_id: null,
						second_cate_id: null,
						third_cate_id: null,
						province: null,
						city: null,
						search_keyword: null,
						merchant_id: null,
						order_column: null, // 排序字段 platform_commission-平台佣金（默认） sale_nunm-销量
						order_value: null, // 排序方式 desc-倒序，默认 asc-升序
						// last_group_limit: 1 // 获取未成团订单数量，默认为1
					},
					list: [],
					status: loadingType.LOADING,
				},
				currentCity: "全部城市",
				showCtyOptions: false,
				cityOptions: City,
				showCate: false,
				cateOptions: [],
				currentCate: [],
				first_cate: "全部分类",
				second_cate: "",
				third_cate: "",
				tabList: [],
				currentTab: 0,
			};
		},
		async onLoad(options) {
			this.getActivities();
			this.headerAction = wx.createAnimation({
				delay: 0,
				duration: 100,
				timingFunction: "ease-in-out",
			});
			this.onPageScroll = trottle(this.onPageScroll, 500, this);
			setTabbar();
			this.navHeight = app.globalData.navHeight;
			this.isDischarge = false;
			// await this.getMenuFun()
			// this.getBestListFun()
			const cates = await getCatrgory();
			// this.getGoodsList();
			this.cateOptions = cates.d.data;
			this.tabList = [];
			this.tabList.push({
				id: null,
				name: "全部项目",
			});
			if (this.cateOptions && this.cateOptions.length) {
				this.delArr(this.cateOptions);
				this.cateOptions.forEach((item) => {
					this.tabList.push({
						id: item.id,
						name: item.name,
					});
				});
			}

			// #ifdef H5
			if (options && options.isapp == 1) {
				this.isShowDownload = true;
			}
			// #endif
		},
		async onShow() {
			this.$nextTick(function() {
				getRect(".index").then((res) => {
					if (res.top == 0) {
						this.navBg = 0;
					}
				});
			});
			let {
				privice,
				city
			} = getApp().globalData;
			if (privice == "推荐") {
				privice = city = "";
			}
			if (privice && city) {
				this.indexList.params.province = privice;
				this.indexList.params.city = city;
				this.currentCity = city;
				this.indexList.params.page = 1;
				this.indexList.list = [];
				this.indexList.status = loadingType.LOADING;
				this.getGoodsList();
			} else {
				this.indexList.params.province = null;
				this.indexList.params.city = null;
				this.currentCity = "全部城市";
				this.indexList.params.page = 1;
				this.indexList.list = [];
				this.indexList.status = loadingType.LOADING;
				this.getGoodsList();
			}
			// #ifdef H5
			this.enable = true;
			// #endif
			// await this.getHomeFun() // 获取首页数据接口
			// this.getCartNum() // 购物车数量
			// this.isLogin && this.getRegisterCouponFun() // 注册赠送优惠券
		},
		onHide() {
			// #ifdef H5
			this.enable = false;
			// #endif
		},
		onReachBottom() {
			//this.getBestListFun()
			this.getGoodsList();
		},
		onPullDownRefresh() {
			// this.getHomeFun()
			// this.getMenuFun();
			this.indexList.params.page = 1;
			this.indexList.list = [];
			this.indexList.status = loadingType.LOADING;
			this.getGoodsList();
		},
		onShareAppMessage(event) {
			if (
				event &&
				event.target &&
				event.target.dataset &&
				event.target.dataset.item
			) {
				let data = event.target.dataset.item;
				return {
					title: data.title,
					path: `pages/goods_details/goods_details?id=${data.id}&marketer_id=${this.$store.getters.userInfo.id}`,
					imageUrl: data.pics[0],
				};
			}
			const shareInfo = Cache.get("shareInfo");
			return {
				title: shareInfo.mnp_share_title,
				path: "pages/index/index?invite_code=" + this.inviteCode,
				imageUrl: shareInfo.mnp_share_image,
			};
		},
		onPageScroll(e) {
			const top = uni.upx2px(100);
			const {
				scrollTop
			} = e;
			if (!this.enable) return;
			let percent = scrollTop / top;
			this.navBg = percent > 1 ? 1 : percent;
			this.scrollTop = scrollTop;
		},
		destroyed() {
			this.isDischarge = true;
		},
		methods: {
			...mapActions(["getCartNum"]),
			async getHomeFun() {
				const {
					code,
					data
				} = await getHome();
				uni.stopPullDownRefresh();
				if (code == 1) {
					const {
						coupon,
						news,
						seckill,
						host_goods,
						shop_logo,
						new_goods,
						activity_area,
					} = data;
					this.remainTime = Math.abs(
						seckill.end_time - Date.parse(new Date()) / 1000
					);
					this.logo = shop_logo;
					this.news = news;
					this.seckillGoods = seckill.goods;
					this.seckill = seckill;
					this.hotGoods = host_goods;
					this.coupon = coupon;
					this.newGoods = new_goods;
					this.activityArea = activity_area;
				}
				await this.getGoodsList();
			},
			tabChange(index) {
				this.currentTab = index;
				this.indexList.params.first_cate_id = this.tabList[index].id;
				this.indexList.params.page = 1;
				this.indexList.list = [];
				this.indexList.status = loadingType.LOADING;
				this.getGoodsList();
			},
			async getActivities() {
				const data = await getPlatformActivity({
					page: 1,
					pagesize: 100
				});
				this.activities = data;
			},
			async getMenuFun() {
				const {
					code,
					data
				} = await getMenu({
					type: 1,
				});
				uni.stopPullDownRefresh();
				if (code == 1) {
					//   截取数组
					if (data.length <= 5) {
						this.navSwiperH = 200;
					} else {
						this.navSwiperH = 374;
					}
					this.navList = arraySlice(data);
				}
			},
			async getBestListFun() {
				let {
					page,
					goodsList,
					status
				} = this;
				// const data = await loadingFun(getBestList, page, goodsList, status)
				if (!data) return;
				this.page = data.page;
				this.goodsList = data.dataList;
				this.status = data.status;
			},
			async tapMenu(item) {
				if (!this.isLogin) return toLogin();
				menuJump(item);
			},
			login() {
				toLogin()
			},
			goPage(url) {
				const tabPagePath = {
					"/pages/index/index": true,
					"/pages/new_service/new_service": true,
					"/pages/user/user": true,
					"/pages/discovery/discovery": true,
				};
				if (!!tabPagePath[url]) {
					// tab页签跳转
					return uni.switchTab({
						url,
					});
				}
				uni.navigateTo({
					url,
				});
			},
			goPageNotLogin(url) {
				uni.navigateTo({
					url,
				});
			},
			swiperChange(e) {
				this.currentSwiper = e.detail.current;
			},
			getRegisterCouponFun() {
				getRegisterCoupon().then((res) => {
					if (res.code == 1) {
						if (res.data && res.data.length) {
							this.showCoupop = true;
						}
						this.couponPopList = res.data;
					}
				});
			},
			copyWechat() {
				uni.setClipboardData({
					data: "17821883911",
					success() {
						uni.showToast({
							title: "微信号已复制",
						});
					},
				});
			},
			async getGoodsList() {
				if (loadingType.FINISHED == this.indexList.status) return;
				const data = await loadingFun(
					getGoodsSearch,
					this.indexList.params.page,
					this.indexList.list,
					this.indexList.status,
					this.indexList.params
				);
				if (!data) return;
				this.indexList.params.page = data.page;
				this.indexList.list = data.dataList;
				this.indexList.status = data.status;
			},
			switchCate(index) {
				const cate = this.cate_tab.data[index];
				this.cate_tab.current = index;
				this.indexList.params.page = 1;
				this.indexList.list = [];
				this.indexList.status = loadingType.LOADING;
				this.getGoodsList();
			},
			selectCity(value) {
				this.showCtyOptions = false;
				this.currentCity = value[value.length - 1].label;
				this.indexList.params.province = value[0].label;
				this.indexList.params.city = value[1].label;
				this.indexList.params.page = 1;
				this.indexList.list = [];
				this.indexList.status = loadingType.LOADING;
				this.getGoodsList();
			},
			cencelCity() {
				if (this.currentCity !== "全部城市") {
					this.currentCity = "全部城市";
					this.indexList.params.province = null;
					this.indexList.params.city = null;
					this.indexList.params.page = 1;
					this.indexList.list = [];
					this.indexList.status = loadingType.LOADING;
					this.getGoodsList();
				}
				this.showCtyOptions = false;
			},
			// 回调参数为包含columnIndex、value、values
			confirmCate(e) {
				console.log("confirm", e);
				this.currentCate = [];
				e.forEach((item) => {
					if (item.value) {
						this.currentCate.push(item);
					}
				});
				this.showCate = false;
				this.indexList.params.first_cate_id = this.currentCate[0].value;
				this.first_cate = e[0].label;
				if (this.currentCate.length === 2) {
					this.indexList.params.second_cate_id = this.currentCate[1].value;
					this.second_cate = e[1].label;
				} else if (this.currentCate.length === 3) {
					this.indexList.params.second_cate_id = this.currentCate[1].value;
					this.second_cate = e[1].label;
					this.indexList.params.third_cate_id = this.currentCate[2].value;
					this.third_cate = e[2].label;
				}
				this.indexList.params.page = 1;
				this.indexList.list = [];
				this.indexList.status = loadingType.LOADING;
				this.getGoodsList();
			},
			cencelCate() {
				this.indexList.params.first_cate_id = null;
				this.indexList.params.second_cate_id = null;
				this.indexList.params.third_cate_id = null;
				this.currentCate = [];
				this.first_cate = "全部分类";
				this.second_cate = "";
				this.third_cate = "";
				this.indexList.params.page = 1;
				this.indexList.list = [];
				this.indexList.status = loadingType.LOADING;
				this.getGoodsList();
			},
			changeCate() {
				this.showCate = true;
			},
			delArr(obj) {
				obj.forEach((item) => {
					if (item.children && item.children.length) {
						this.delArr(item.children);
					} else {
						item.children = "";
					}
				});
			},
			activityClick(index) {
				if (this.activities[index]?.id) {
					this.goPage(`/pages/activity_detail/activity_detail?id=${this.activities[index].id}`);

				}
			},
		},
		computed: {
			...mapGetters(["cartNum", "inviteCode", "appConfig", 'userInfo', 'isLogin']),
			navBackground() {
				return this.seting.top_bg_image ? {
					"background-image": `url(${this.seting.top_bg_image})`,
				} : {};
			},
			showLogo() {
				return this.seting.logo;
			},
			navSearch() {
				if (this.showLogo === 0) return true;

				return this.navBg < 1 ? false : true;
			},
			seting() {
				const {
					index_setting
				} = this.appConfig;
				return index_setting;
			},
		},
	};
</script>

<style lang="scss">
	.home-bg {
		background-color: #fff;
	}

	.activity-box {
		background: #fff;
		padding: 17upx 0 40upx;
	}

	.acivitie-wrapper {
		margin-top: 24upx;
		padding: 0 20upx;

		::v-deep .u-swiper-indicator {
			bottom: -12px !important;
		}

		::v-deep .u-swiper-wrap {
			overflow: visible !important;
		}

		::v-deep .u-swiper-wrap {
			overflow: visible !important;
		}

		::v-deep .u-indicator-item-rect {
			background-color: #f0f0f0;
			border-radius: 6upx;
		}

		::v-deep .u-indicator-item-rect-active {
			background-color: #ff5e61 !important;
		}
	}

	.banner-top {
		margin: 0 20upx 0;

		&-img {
			width: 224rpx;
			height: 126rpx;
		}
	}

	.nav-top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		margin-right: 20rpx;

		.logo-top {
			display: flex;
			align-items: center;

			&__logo {
				width: 108upx;
				height: 48upx;
				margin-right: 6upx;
			}

			&__slogan {
				width: 280upx;
				height: 40upx;
			}

			&__city {
				display: flex;
				align-items: center;
				margin-left: 10upx;
			}
		}
	}

	.grid-nav {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0 20upx 20upx;

		&__img {
			width: 224upx;
			height: 126upx;
		}
	}

	.banner {
		margin: 0 20upx;

		&-img {
			width: 708upx;
			height: 182upx;
		}
	}

	.footer-loging-wrapper {
		position: fixed;
		bottom: 132upx;
		bottom: calc(var(--window-bottom) + 28upx);
		left: 50%;
		transform: translateX(-50%);

		width: 696upx;
		height: 98upx;
		border-radius: 100upx;
		background-color: rgba(0, 0, 0, 0.46);
		backdrop-filter: blur(54upx);
		/* 新用户注册赠红包 */

		font-family: PingFang SC;
		color: #FF5E61;
		font-weight: 600;
		font-size: 28upx;

		z-index: 99;

		.login-button {
			/* Frame 196 */
			width: 136upx;
			height: 56upx;
			border-radius: 56upx;
			font-weight: 500;
			font-size: 24upx;
			background-color: #00BE4C;
			color: #fff;
			text-align: center;
			line-height: 56upx;
			margin-left: 14upx;
		}
	}

	.index {
		.live-play {
			position: fixed;
			z-index: 999;
			bottom: 200rpx;
			right: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 80rpx;
			height: 80rpx;
			border: $-solid-border;
			border-radius: 50%;
			font-size: 32rpx;
			background-color: #ffffff;

			&__icon {
				animation: scale 0.5s infinite;
			}

			@keyframes scale {
				from {
					top: 0px;
					transform: scale(1);
				}

				to {
					transform: scale(1.2);
				}
			}
		}

		background-size: 100% auto;

		.logo-wrap {
			position: absolute;

			.logo {
				width: auto;
				height: 52rpx;
			}
		}

		.header {
			.navigation-bar {
				padding-top: var(--status-bar-height);
				box-sizing: border-box;
			}
		}

		.contain {
			.main {
				position: relative;
				z-index: 9;
				background: #fff;
				/*padding: 0 20rpx;*/

				.nav {
					position: relative;
					border-radius: 14rpx;

					.nav-item {
						width: 20%;
						margin-top: 30rpx;

						.nav-icon {
							width: 82rpx;
							height: 82rpx;
							margin-bottom: 15rpx;
						}
					}

					.dots {
						position: absolute;
						left: 50%;
						transform: translateX(-50%);
						bottom: 20rpx;
						display: flex;

						.dot {
							width: 10rpx;
							height: 6rpx;
							border-radius: 6rpx;
							margin-right: 10rpx;
							background-color: rgba(255, 44, 60, 0.4);

							&.active {
								width: 20rpx;
								background-color: $-color-primary;
							}
						}
					}
				}

				.information {
					height: 76rpx;
					box-shadow: 0px 0px 14px rgba(0, 0, 0, 0.06);
					padding: 0 20rpx;
					box-sizing: border-box;
					border-radius: 14rpx;

					.news {
						position: relative;

						.shade {
							position: absolute;
							width: 100%;
							height: 100%;
							z-index: 100;
						}
					}

					.icon-toutiao {
						width: 114rpx;
						height: 34rpx;
					}

					.gap-line {
						height: 28rpx;
						width: 1px;
						background-color: #dcdddc;
						margin: 0 30rpx;
					}
				}

				.special-area {
					.item {
						width: 300rpx;
						border-radius: 20rpx;
						display: inline-block;
						overflow: hidden;
						margin-right: 20rpx;

						.title {
							padding: 10rpx 0;
						}

						.desc {
							background-color: #fee9eb;
							padding: 6rpx 20rpx;
							border-radius: 60rpx;
							max-width: 260rpx;
						}
					}
				}

				.cateList {
					width: 100%;
					box-sizing: border-box;
					padding: 0 40rpx;
					display: flex;
					align-items: center;
					height: 80rpx;

					.cate-item {
						width: 33.33%;
						text-align: center;
					}
				}

				.activity-header {
					height: 90rpx;
					padding: 0 20rpx;
				}

				.seckill {
					.dec {
						background-color: #fffbdb;
						width: 150rpx;
					}
				}

				.hot,
				.new-goods {
					.title-image {
						width: 144rpx;
						height: 55rpx;
					}
				}

				.hot {
					margin-top: 20rpx;
				}
			}

			.goods {
				.goods-title {
					height: 100rpx;

					.line {
						width: 58rpx;
						height: 1px;
						background-color: #ccc;
						margin: 0 22rpx;
					}

					.icon {
						width: 38rpx;
						height: 38rpx;
					}
				}
			}
		}

		// .coupon-pop-container {
		// 	background-image: url(../../static/images/home_coupon_bg.png);
		// 	width: 638rpx;
		// 	height: 804rpx;
		// 	background-size: 100% 100%;
		// 	padding-top: 323rpx;

		// 	.coupon-pop-lists {
		// 		.coupon-pop-item {
		// 			background-image: url(../../static/images/pop_bg_coupon.png);
		// 			width: 488rpx;
		// 			height: 150rpx;
		// 			background-size: 100% 100%;
		// 			margin-top: 20rpx;

		// 			.coupon-left {
		// 				width: 160rpx;
		// 				height: 100%;
		// 			}

		// 			.coupon-right {
		// 				padding-left: 30rpx;
		// 				border-left: 1rpx dashed $-color-primary;
		// 			}
		// 		}
		// 	}
		// }

		.coupons-popup {
			.wrap {
				position: relative;
				width: 638rpx;
				height: 803rpx;
				overflow: hidden;

				.coupon-bg {
					position: absolute;
					top: 0;
					width: 100%;
					height: 100%;
				}

				.item {
					position: relative;
					width: 488rpx;
					height: 150rpx;
					margin: 0 auto 20rpx;
				}

				.img {
					position: absolute;
					width: 100%;
					height: 100%;
					z-index: 0;
				}

				.item-con {
					z-index: 10;
					position: relative;
					padding: 20rpx 0;
					height: 100%;
					box-sizing: border-box;

					.price {
						width: 160rpx;
						border-right: 1px dashed $-color-primary;
						height: 100%;
					}
				}
			}

			.btn {
				width: 478rpx;
				height: 84rpx;
				margin: 20rpx auto;
				box-sizing: border-box;
				border: 3px solid #f8d07c;
			}
		}
	}
</style>